<template>
	<div class="homes">		
		<div class="content-block" id="city_select" v-bind:class="[{is_edit:isEdit}]">
			<img class="icon-img" src="../../assets/images/myinfo/city.png" alt="" />
			<label class="form_label select_label" >{{label}}</label>
			<input id="demo1" class="city" type="text" v-on:input="changes(this)" v-model="areas_name" readonly="true" placeholder="城市选择"  />
			<input id="value1" class="code" v-on:input="changes(this)" type="hidden" hiden="hidden" />
			<div v-if="!isEdit" class="covers" ></div>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import LArea from './LArea.js'
	export default {
		components: {

		},
		props: {
			value:{
				default:''
			},
			label:{
				type:String,
				default:'所在省市'
			},
			disable: {
				type: String,
				default: undefined
			},
			aligned: {
				type: String,
				default: 'left'
			},
			isEdit: {
				type: Boolean,
				default: true
			},
			validator:{
				
			},
			color: {
				type: String,
				default: 'black'
			},
			font_size: {
				type: Number,
				default: 26
			},
			areaPath:{
				type:Array,
				default:[]
			}
		},
		computed: {
			_aligned() {
				return('text-' + this.aligned)
			}
		},
		data() {
			return {
				areas:[],
				areas_name:'',
				LAreaData:[]
			}
		},
		watch:{
			areaPath(val,oldval){
				console.log(val,oldval)
			}
		},
		mounted: function() {
			var that = this;
			that.areas_name = ''
			console.log(this.value,'______')
			//地址为空时
			if(this.areaPath.length<1){
				that.areas_name = '请选择城市'
				$("#demo1").css({'color':'#989898'})
			}			
			that.areas = that.areaPath.slice(1,that.areaPath.length)
			$("#demo1").val(that.areas)
			this.globalData.ajaxGet('getAreaList', null, function(res) {
				var LAreaData = res.data;
				that.LAreaData = res.data
				console.log(res.data);
				var area1 = new window.LArea();
				area1.init({
					'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
					'valueTo': '#value1', //选择完毕后id属性输出到该位置
					'keys': {
						id: 'id',
						name: 'name'
					}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
					'type': 1, //数据源类型
					'data': LAreaData //数据源
				});
				area1.value=[0,0,0];
				//获取省id,
				if(that.areas.length>0){
					var province_id = that.areas[0]
					var city_id = that.areas[1]
					var county_id  = that.areas[2]
					for(var i=0;i<LAreaData.length;i++){
						if(province_id==LAreaData[i].id){
							area1.value[0] = i
							that.areas_name += LAreaData[i].name
							if(!LAreaData[i].child){break;}
							var data2= LAreaData[i].child
							console.log(data2)
							for(var j=0;j<data2.length;j++){
								if(city_id == data2[j].id){
									area1.value[1] = j
									that.areas_name += data2[j].name
									if(!data2[j].child){break;}
									console.log(j)
									var data3 = data2[j].child
									for(var k=0;k<data3.length;k++){
										if(county_id==data3[k].id){
											area1.value[2] = k
											that.areas_name += data3[k].name
											break;
										}
									}
									break;
								}
							}
							break;
						}
					}
				}
				
				setTimeout(function(){
					var formdatas = {
						areaPath:[],
						areas:''
					}
					$.each(that.value,function(k,v){
						formdatas[k] = v
					})
					formdatas.areas = that.areas_name
					that.$emit('input', formdatas);
				},50)
				
//				area1.value=[1,13,3]; //控制初始位置，注意：该方法并不会影响到input的value //索引

			});

		},
		methods: {
			changes(item) {
				var that = this;
				console.log($("#city_select .city").val())
				console.log($("#city_select .code").val())
				var ids = $("#city_select .code").val().split(',')
				var formdatas = {
					areaPath:[],
					areas:'',
					county_id:'',
					county_code:''
				}		
				that.areas_name = ''
				var LAreaData = that.LAreaData
				for(var i=0;i<LAreaData.length;i++){
					var province_id = ids[0]	
					console.log(province_id)
					if(province_id==LAreaData[i].id){
						that.areas_name += LAreaData[i].name
						//赋值，
						formdatas.county_id = LAreaData[i].code
						formdatas.county_code = LAreaData[i].code
//						alert(LAreaData[i].code,LAreaData[i].id)
						if(!LAreaData[i].child){break;}
						var data2= LAreaData[i].child
						for(var j=0;j<data2.length;j++){
							var city_id = ids[1]
							if(city_id == data2[j].id){
								that.areas_name += data2[j].name
								//赋值，
								formdatas.county_id = data2[j].id
								formdatas.county_code = data2[j].code
								if(!data2[j].child){break;}
								var data3 = data2[j].child
								for(var k=0;k<data3.length;k++){
									var county_id  = ids[2]
									if(county_id==data3[k].id){
										//赋值，
										formdatas.county_id = data3[k].id
										formdatas.county_code = data3[k].code	
										that.areas_name += data3[k].name
										break;
									}
								}
								break;
							}
						}
						break;
					}
				}
				
				setTimeout(function(){
					console.log(formdatas)
					that.$emit('input', formdatas);
				},50)
				
				
			},
			select_customer(item) {
				this.current_customer = item
				this.customers_show = false;
			},
			calculation(size) {
				console.log(size)
				var font_size = Number(size) / 750 * document.body.clientWidth + 'px'
				console.log(font_size)
				$(".day_select").css({
					'font-size': font_size
				})
				console.log($(".day_select").css('font-size'))
			},
			req:function(){
				return {
					suc: true,
					msg: '保存成功！'
				}
			}
		}
	}
</script>
<style lang="less" scoped="scoped">
	@import '../../common/less/base.less';
	input {
		border: none;
		width: 100%;
		background: #fff;
	}
	
	.homes {
		/*height: 100%;*/
	    max-width: 100%;
		height: 135*@base_size_t;
    	line-height: 130*@base_size_t;
    	display: flex;
	    #city_select{
	    	width:100%;
	    	display: flex;
	    	align-items: center;
	    	position:relative;
	    	
	    	#demo1{
	    		text-align: right;
	    		padding:30*@base_size_t 0;
	    	}
	    	.icon-img{
	    		flex: 0 0 ;
        		padding-right: 28*@base_size_t;
        		height: 36*@base_size_t;
	    	}
	    	.covers{
	    		position:absolute;
	    		width:100%;
	    		height:100%;
	    		top:0;
	    		left: 0;
	    		z-index: 300;
	    	}	  
	    }
	    .is_edit{
	    	padding-right:50*@base_size_t;
	    }
		.day_select {
			/*width: 100%;*/
		}
		.form_label{
        color: #000000;
        font-size: 36*@base_size_t;
        display: inline-block;
        flex: 0 0 50*@base_size_t;
        word-break: keep-all;
    }
	}
	
	.text-right {
		text-align: right;
		>* {
			text-align: right;
		}
	}
.is_edit{//选项文字是否右对齐
    #city_select{
        padding-right: 0 !important;
    }
}

</style>